<template>
	<view>
		<view class="search-box">
			<t-search v-model="search" @confirm="$jumpUrl(`/subPages/searchList/searchList?keyword=${search}`)" plac-text="关键词搜一下"></t-search>
		</view>
		<t-tabs :list="tabsList" :activeIndex="tabsIndex" @change="tabsChange" justifyContent="space-between"></t-tabs>
		<swiper class="swiper-box">
			<swiper-item class="sw-item" v-for="(item,index) in banner">
				<image @click="bannerClick(item)" :src="'https://www.worldintek.com:39011/yaolexue-service/'+item.imageDto.compressLink" class="sw-img"></image>
				<view class="cr-333 font_s32 font_w600 padd-left31 line-height100 padd-top4">
					{{item.bannerName}}
				</view>
				<view class="padd-right30 flex justify-end cr-FA312A font_s26 mar-top24 line-height100 sw-number">
					{{index+1}}
				</view>
			</swiper-item>
		</swiper>
		<view class="list">
			<u-list @scrolltolower="scrolltolower" height="calc(100vh - 450rpx - 80rpx - 145rpx)">
				<u-list-item class="u-list-item" v-for="(item, index) in list">
					<view class="flex justify-between">
						<view class="l-con  cr-333 font_s30 line-height100">
							<view class="l-text width_1">{{item.title}}</view>
						</view>
						<view class="r-con  cr-999 align-center font_s26">
							<view class="r-text width_1" @click="handleMore(item)">更多</view>
						</view>
					</view>
					<view class="list-item-img flex">
						<view class="img-box" v-for="ite in item.albumContentItemDtos" @click="handleDetail(item,ite)">
							<image class="poster" :src="'https://www.worldintek.com:39011/yaolexue-service/'+ite.imageDto.compressLink"></image>
							<image class="play-icon" src="https://www.worldintek.com:39011/yaolexue-service/icon_playCircle.png" mode=""></image>

						</view>
					</view>
					<view class="font_s26 cr-999 mar-top20 line-height100 flex justify-between">
						<text class="">
							{{item.lastUpdateName}}
						</text>
						<text class="mar-left14">
							{{item.lastUpdateTime}}
						</text>
					</view>
				</u-list-item>
        <u-empty
               
            v-if="showEmpty"
                    mode="list"
          
            >
            </u-empty>
			</u-list>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        showEmpty: false,
				search: '',
				tabsList: [],
				tabsIndex: 0,
				list: [],
				page: 1,
				banner:[]
			};
		},
		onLoad() {
			this.init()
		},
		computed: {
			columnNavId() {
				if (!this.tabsList.length) return
				return this.tabsList[this.tabsIndex].id
			},
		},
		methods: {
			async init() {
				this.reset()
				this.getBanner()
				const res = await this.getTabs()
				this.tabsList = res.data
				this.getVideoList(true)
			},
			getBanner(){
				return this.$http.get(
					`/yaolexue-service-portal/contentItem/findHomeBannerBoardByPosition/5`, {}, {
						isNeedLoading: false
					}).then(res=>{
						console.log(res,2222)
						this.banner=res.data
					})
			},
			async getTabs() {
				return this.$http.get(
					`/yaolexue-service-portal/column/columnAll/3`, {}, {
						isNeedLoading: false
					})
			},
			async getVideoList(init) {
				if (init || this.total > this.list.length) {
					return this.$http.get(
						`/yaolexue-service-portal/contentItem/pageContentAudio`, {
							columnNavId: this.columnNavId,
							limit: 10,
							page: this.page,
						}, ).then(res => {
						console.log(res);
						const datas=res.data.items
						this.list =init?datas:[...this.list,datas]
						this.total = res.data.total
            if(this.total ===0)this.showEmpty=true
					})
				}
			},
			reset() {
        this.showEmpty=false
				this.list = []
				this.total = 0
				this.page = 1
			},
			tabsChange(e) {
				this.tabsIndex = e
				this.reset()
				this.getVideoList(true)
			},
			scrolltolower() {
				this.page += 1
				this.getVideoList()
			},
			handleMore(e) {
				uni.navigateTo({
					url: '/pages/AudioItemList/AudioItemList?id=' + e.id
				})
			},
			handleDetail(fid,cid) {
				uni.navigateTo({
					url: `/pages/AudioItemList/AudioItemList?id=${fid.id}&cid=${cid.id}`
				})
			},
      bannerClick(item) {
       
        let url = ''
        switch (item.contentItemType) {
        	case 1:
        		url = `/pages/imgtxtDetails/imgtxtDetails?id=${item.contentItemId}`
        		break;
        	case 2:
        		url = `/pages/VideoItemDetail/VideoItemDetail?id=${item.contentItemId}`
        		break;
        	case 3:
        		url = `/pages/AudioItemList/AudioItemList?id=${item.albumId}&cid=${item.contentItemId}`
        		break;
        	default:
        		break;
        }
       uni.navigateTo({
         url
       })
       
      },
		}
	}
</script>

<style lang="scss" >
  .u-empty{
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
	.search-box {
		width: 100%;
		height: 145rpx;
		background: #FA312A;
		display: flex;
		justify-content: center;
		align-items: center;
    position: sticky;
    top: 0;
    z-index: 999;
	}



	.swiper-box {
		width: 100%;
		height: 450rpx;
		background: #FAFAFA;

		.sw-item {
			width: 100%;
			height: 100%;

			.sw-img {
				width: 100%;
				height: 340rpx;
			}

			.sw-number {
				position: relatie;
				display: inline-flex;
				align-items: center;
				float: right;
				color: #FA312A;

				&::before {
					content: '';
					width: 45rpx;
					height: 2rpx;
					background: #E1E1E1;
					display: inline-block;
					margin-right: 21rpx;
				}

				&::after {
					content: '';
					width: 45rpx;
					height: 2rpx;
					background: #E1E1E1;
					display: inline-block;
					margin-left: 21rpx;
				}
			}
		}
	}

	.list {
		background: #fff;
		padding: 0 30rpx;

		.u-list-item {
			padding: 29rpx 0 27rpx 0;
			border-bottom: 1px solid RGBA(240, 240, 240, 0.3);

			.list-item-img {
				margin-top: 19rpx;

				.img-box {
					position: relative;
					width: 220rpx;
					height: 130rpx;
					border-radius: 10rpx;

					&:not(:nth-child(3n)) {
						/* margin-right: 14rpx; */
						margin-right: calc((100% - 660rpx) / 2);
					}
				}

				.play-icon {
					width: 52rpx;
					height: 52rpx;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}

				.poster {

					width: 100%;
					height: 100%;

				}
			}
		}
	}
</style>